$(function () {
    // 默认的 shopid 和 areaid
    var shopId = 0;
    var areaId = 0;
    init();
    // 注册点击事件 添加类名 on 转换样式 显示
    $(".list .selectable li").click(function () {
        // 倒三角自动切换开关
        $(this).parent().find('.hide').toggle();
        // $(this).toggleClass("on");
        // console.log(this);
    })

    $(".list .selectable li").each(function (index) {
        $(this).click(function () {
            // 显示对应 的点击下拉 排他隐藏其他的
            $(".seach").removeClass('on');
            $(".search1").hide();
            // $(this).toggleClass("on");
            $(this).toggleClass("on").siblings().removeClass('on');
            $(this).parent().parent().parent().find('.hide').eq(index).toggleClass('on').siblings().removeClass("on");
            // console.log(this,index)
        })
    })
    // 精简查询
    $(".search").click(function () {
        $(".selectable li").removeClass("on");
        $(".selectable .hide").removeClass("on");
        $(this).toggleClass("on");
        $(this).parent().find(".search1").toggle();
        // 搜索框有内容的时候显示搜索框
        console.log('123');
    })

    // 注册点击事件获取对应的id
    $(".jd1 ul").on("click", "li", function () {
        // console.log(event.target);
        shopId = $(event.target).attr("data-shopId");
        $(this).siblings().removeClass("on");
        $(this).addClass("on");
        console.log( $(this));
        var shopName = $(event.target).html();
        $(".one").html(shopName);
        getIndexmenu(shopId, areaId,function (res) {
            // template(模板的id,要渲染的数据)
            var html = template("container1", {
                arr: res.result
            });
            // console.log(html);
            // 渲染
            $("#container").html(html);
        });
    })

    
    $(".huabei2 ul").on("click", "li", function () {
        // console.log(event.target);
        var areaId = $(event.target).attr("data-areaId");
        $(this).siblings().removeClass("on");
        $(this).addClass("on");
        var areaName = $(event.target).html().substring(0,2);
        console.log(areaName);
        $(".two").html(areaName);
        getIndexmenu(shopId, areaId,function (res) {
            // template(模板的id,要渲染的数据)
            var html = template("container1", {
                arr: res.result
            });
            // console.log(html);
            // 渲染
            $("#container").html(html);
        });
    })

    $(".price3 ul").on("click", "li", function () {
        var shopName = $(event.target).html();
        $(".three").html(shopName);
        $(this).siblings().removeClass("on");
        $(this).addClass("on");
        getIndexmenu(shopId, areaId,function (res) {
            // template(模板的id,要渲染的数据)
            var html = template("container1", {
                arr: res.result
            });
            // console.log(html);
            // 渲染
            $("#container").html(html);
        });
    })

    // 获取每一项的id 准备动态渲染数据
    // 封装一个函数

    function init() {
        // 就需要执行的代码
        getJd1();
        huabei();
        getIndexmenu(shopId, areaId, function (res) {
            // template(模板的id,要渲染的数据)
            var html = template("container1", {
                arr: res.result
            });
            // console.log(html);
            // 渲染
            $("#container").html(html);
        });
    }
    // 第一个下拉
    function getJd1() {
        // 使用zepto发送请求
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getgsshop",
            dataType: "json",
            success: function (res) {
                // console.log(res.result);
                var html = template("jd", {
                    arr: res.result
                });
                $(".jd1 ul").html(html);
            }
        })
    }
    // 第二个下拉
    function huabei() {
        // 使用zepto发送请求
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getgsshoparea",
            dataType: "json",
            success: function (res) {
                // console.log(res.result);
                var html = template("huabei2", {
                    arr: res.result
                });
                $(".huabei2 ul").html(html);
            }
        })
    }

    // 商品展示
    function getIndexmenu(shopId, areaId, callback) {
        $.ajax({
            dataType: "json",
            type: "get",
            data: {
                shopid: shopId,
                areaid: areaId
            },
            url: "http://193.112.55.79:9090/api/getgsproduct",
            beforeSend: function () {
                console.log(shopId);
                console.log(areaId);
            },
            success: function (res) {
                callback && callback(res);
            }
        });


    }
})